<script setup lang="ts">
import { ref, provide, onMounted } from "vue";
import { RouterView } from "vue-router";
import ThemeSettings from "@/components/ThemeSettings.vue";
import { userInfo } from "@/apis/login";
import { useAppStoreWithOut } from "@/store/modules/app";
import { useWebsoctkeStoreWithOut } from "@/store/modules/websoctke";
import { getStorage, saveStorage } from "@/utils/storage/storage";
const store = useAppStoreWithOut();
const store1 = useWebsoctkeStoreWithOut();

// 主题设置抽屉的显示状态
const showTheme = ref(false);

// 初始化主题设置
const initTheme = () => {
  // 获取保存的主题模式
  const theme = localStorage.getItem("theme") || "light";
  const isDark =
    theme === "dark" ||
    (theme === "auto" &&
      window.matchMedia("(prefers-color-scheme: dark)").matches);

  // 设置暗黑模式
  if (isDark) {
    document.documentElement.classList.add("dark");
  } else {
    document.documentElement.classList.remove("dark");
  }

  // 获取保存的主题色
  const primaryColor = localStorage.getItem("primaryColor");
  if (primaryColor) {
    const el = document.documentElement;
    el.style.setProperty("--el-color-primary", primaryColor);

    // 生成并设置主题色的不同亮度
    const mix = (color1: string, color2: string, weight: number) => {
      const d2h = (d: number) => d.toString(16).padStart(2, "0");
      const h2d = (h: string) => parseInt(h, 16);

      let c1 = color1.substring(1);
      let c2 = color2.substring(1);

      let mix = "#";

      for (let i = 0; i < 3; i++) {
        const c1Val = h2d(c1.substr(i * 2, 2));
        const c2Val = h2d(c2.substr(i * 2, 2));
        const val = Math.round(c1Val * (1 - weight) + c2Val * weight);
        mix += d2h(val);
      }

      return mix;
    };

    // 生成不同亮度的主题色
    for (let i = 1; i <= 9; i++) {
      const lightColor = mix(primaryColor, "#ffffff", i * 0.1);
      el.style.setProperty(`--el-color-primary-light-${i}`, lightColor);
    }

    // 生成深色主题下的主题色
    const darkColor = mix(primaryColor, "#000000", 0.2);
    el.style.setProperty("--el-color-primary-dark-2", darkColor);
  }

  // 监听系统主题变化
  if (theme === "auto") {
    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
    const handleChange = (e: MediaQueryListEvent) => {
      if (e.matches) {
        document.documentElement.classList.add("dark");
      } else {
        document.documentElement.classList.remove("dark");
      }
    };
    mediaQuery.addEventListener("change", handleChange);
  }
};
// 获取用户信息
const getUserInfo = async () => {
  const s1 = getStorage("token");
  const s2 = store.getToken;
  const token = s1 ? s1 : s2;
  if (!token) {
    return;
  }
  store.setToken(token);
  saveStorage("token", token);
  const r = "/ws?" + `user_token=${token}`;
  store1.initWebSocket(r);
  try {
    const res = await userInfo();
    store.setUserIinfo(res);
  } catch (error) {
    console.log(error);
  }
};
// 提供给全局的主题设置方法
const toggleTheme = () => {
  showTheme.value = !showTheme.value;
};

// 提供给子组件使用
provide("toggleTheme", toggleTheme);

// 初始化主题
onMounted(() => {
  initTheme();
  getUserInfo();
});
</script>

<template>
  <div class="app-container">
    <RouterView />
  </div>
  <!-- 主题设置抽屉 -->
  <el-drawer
    v-model="showTheme"
    title="主题设置"
    direction="rtl"
    size="300px"
    :destroy-on-close="false"
  >
    <theme-settings />
  </el-drawer>
</template>

<style lang="scss">
@import "element-plus/theme-chalk/dark/css-vars.css";

.app-container {
  width: 100%;
  height: 100%;
  background-color: var(--el-bg-color);
  color: var(--el-text-color-primary);
}

// 深色模式下的全局样式调整
html.dark {
  color-scheme: dark;

  // 背景色和文字颜色
  --el-bg-color: #141414;
  --el-bg-color-page: #141414;
  --el-bg-color-overlay: #1d1e1f;

  // 文字颜色
  --el-text-color-primary: #fff;
  --el-text-color-regular: #d1d1d1;
  --el-text-color-secondary: #a3a6ad;
  --el-text-color-placeholder: #8d9095;
  --el-text-color-disabled: #6c6e72;

  // 边框颜色
  --el-border-color: #4c4d4f;
  --el-border-color-light: #414243;
  --el-border-color-lighter: #363637;
  --el-border-color-extra-light: #2b2b2c;

  // 填充色
  --el-fill-color: #262727;
  --el-fill-color-light: #1d1d1d;
  --el-fill-color-blank: transparent;

  // 遮罩层
  --el-mask-color: rgba(0, 0, 0, 0.8);
  --el-mask-color-extra-light: rgba(0, 0, 0, 0.3);

  // 阴影
  --el-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  --el-box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  --el-box-shadow-lighter: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  --el-box-shadow-dark: 0 2px 16px 0 rgba(0, 0, 0, 0.2);
}

// 主题切换过渡动画
* {
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}
</style>
